<template>
    <div>

      <div id="myChart4map" style="top:40px" :style="style"></div>
    </div>
</template>
<script>
import 'echarts/map/js/china.js';
export default {
  data () {
    return {
      
      totalData:[]
    }
  },
  mounted(){
    this.drawLine();
    this.loadTotalData();
  },
  methods: {
    loadTotalData(){
      var _this=this;
      this.postRequest("/account/getTotalData",{
        timeStr:this.setTime
      }).then(resp=>{
            _this.tableLoading=false;
            if (resp && resp.status == 200) {
              _this.totalData = resp.data;
              // for(var i=0;i<resp.data.length;i++){
              //   _this.totalData[i]="{name:'"+resp.data[i].name+"',value:'"+resp.data[i].value+"'}"
              // }
              this.drawLine();
            }
          })
    },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart4map = this.$echarts.init(document.getElementById('myChart4map'))
        let param = [];
        for(var i=0;i<this.totalData.length;i++){
          param.push({
            name:this.totalData[i].name,
            value:this.totalData[i].value,
          })
        }
        // 绘制图表
        let option = {
            title : {
                text: '加班分部图',
                left:'center'
            },
            tooltip : {
                trigger: 'item'
            },
            dataRange: {
                orient: 'horizontal',
                min: 0,
                max: 55000,
                text:['高','低'],           // 文本，默认为数值文本
                color:['#20a0ff','#D2EDFF'],
                left:'center',
                splitNumber:0
              
            },
            toolbox: {
                show : false,
                orient: 'horizontal',
                left:'800px',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false}
                }
            },
            
            series : [
                {
                    name: '加班总金额',
                    type: 'map',
                    mapType: 'china',
                    left:'center',
                    selectedMode : 'multiple',
                    itemStyle:{
                        
                        normal:{
                          label:{show:true},
                          borderColor:"#fff",  
                        },
                        emphasis:{label:{show:true}}
                    },
                    data:param
                }
            ],
            animation: true
        };

            myChart4map.setOption(option, true);

                    
                          
    },
    
  },
  props:{
        width2map: {
          type: String,
          default: "1000px"
        },
        height2map: {
          type: String,
          default: "500px"
        },
        setTime:{
          type:String,
          default:'-1'
        }
    },
    computed: {
        style(){
            return {
                height: this.height2map,
                width: this.width2map,
            };
        }
    },
    watch:{
      setTime:function(value,oldValue){
        console.log(value)
        this.loadTotalData();
      },
      deep:true
    }

}
</script>
